<script setup lang="ts"></script>
<template>
  <div class="content">
    <div class="div">
      <!-- 页面右侧结构 -->
      <div class="ger"></div>

      <!-- 足迹内容 -->
      <div class="foot">
        <div class="title">
          <h4>我的足迹</h4>
          <a href="JavaScript:;">清除全部</a>
        </div>
        <div class="foot-con">
          <div class="item">
            <div class="item-logo"></div>
            <div class="item-title">
              <p>今天</p>
              <ul></ul>
            </div>
          </div>
          <div class="item">
            <div class="item-logo"></div>
            <div class="item-title">
              <p>昨天</p>
              <ul></ul>
             </div>
          </div>
          <div class="item">
            <div class="item-logo"></div>
            <div class="item-title">
              <p>更早以前</p>
              <a href="javascript:;">删除</a>
              <ul>
                <li>
                  <i class="iconfont icon-guanbi"></i>
                  <a href="javascript:;">
                    <img src="../../../images/sp.png" alt="" />
                    <p class="name">今天奢侈一把</p>
                    <p class="desc">赖点小鸟伏特加</p>
                    <p class="price">￥166.66</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
@import url(../../Layout/icons/iconfont.css);
.ger {
  width: 227px;
  height: 1080px;
  background-color: #fff;
  margin-right: 18px;
}
.div {
  display: flex;
}
.content {
  width: 1240px;
  margin: 0 auto;
}
.foot {
  width: 995px;
  height: 1080px;
  background-color: #fff;
}
.title {
  line-height: 70px;
  margin: 0 25px;
  height: 70px;
  border-bottom: 1px solid #f5f5f5;
  h4 {
    font-size: 16px;
    font-weight: 400;
    float: left;
  }
  a {
    color: #27ba9b;
    float: right;
  }
}
.foot-con {
  padding: 50px 25px;
  .item {
    display: flex;
    .item-logo {
      width: 27px;
      border-right: 2px solid #f5f5f5;
      margin-right: 25px;
      position: relative;
    }
    .item-logo::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(11px, -4px);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      background: #e3f9f4;
    }
    .item-logo::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(7px);
      border-radius: 50%;
      width: 12px;
      height: 12px;
      background: #27ba9b;
      z-index: 1;
    }
    .item-title {
      flex: 1;
      p {
        display: inline-block;
        margin-top: -5px;
        font-size: 16px;
        color: #999;
      }
      a {
        display: inline;
        color: #cf4444;
        margin-left: 10px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 25px;

        li {
          width: 278px;
          height: 370px;
          padding-top: 25px;
          text-align: center;
          margin-bottom: 25px;
          margin-left: 10px;
          position: relative;
          i {
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background: #e4e4e4;
            color: #fff;
            text-align: center;
            line-height: 30px;
            display: none;
          }
          a {
            img {
              width: 192px;
              height: 192px;
            }
            .name {
              display: block;
              color: #333;
              font-size: 16px;
              padding-top: 18px;
            }
            .desc {
              display: block;
              color: #999;
              padding-top: 24px;
            }
            .price {
              font-size: 18px;
              color: #cf4444;
              padding-top: 28px;
            }
          }
        }
        li:hover {
          box-shadow: 0 0 10px #e4e4e4;
        }
      }
    }
  }
}
</style>
